<div class="w100 h100 flex_center" id="TocButton">
  <i class="iconfont icon-sort"></i>
  <div class="toc_wrapper flex_center"></div>
</div>

<script>
  document.querySelector("#TocButton")?.addEventListener("click", () => {
    const t = document.querySelector("#TocList")!;
    if (t.getAttribute("data-hidden") === "false") {
      t.setAttribute("class", t.getAttribute("class")!.replace("show", ""));
      t.setAttribute("data-hidden", "true");
    } else {
      t.setAttribute("class", `${t.getAttribute("class")} show`);
      t.setAttribute("data-hidden", "false");
    }
  });
</script>

<style lang="scss">
  .toc_wrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
  }
</style>
